@border-radius: 3px;

@img-path: '../res/img';

@col-width: 287px;

@import '../vendor/bootstrap/variables';
@import '../vendor/bootstrap/dropdowns';
@import (inline) '../vendor/bootstrap-select/dist/css/bootstrap-select.min.css';
@import 'css/colors';
@import 'css/colors_classic';
@import 'css/colors_dark';
@import 'css/variables';
@import 'css/component';
@import 'css/window';
@import 'css/loader';

* {
    box-sizing: border-box;
}

body {
    cursor: default;
}

input,
button {
    font-family: 'Open Sans',sans-serif;
}

.injected-svg {
    width: 0;
    height: 0;
    position: absolute;
    z-index: -1;
}

#wrap {
    overflow: auto;
    -webkit-user-select: none;
    user-select: none;
    /*overflow: hidden;*/

    background-color: @background-normal;
}

#placeholder {
    position: absolute;
    width: 100%;
    height: 100%;
    /*padding: 25px;*/
    font-family: 'Open Sans',sans-serif;
    /*min-width: 1088px;*/
    /*min-height: 625px;*/
    display: flex;
    background-color: @background-normal;

    /*@media(min-width: 1200) {}*/
}

h3, caption {
    font-weight: 100;
    font-size: 24px;
    color: @text-normal;
}

h4 {
    font-weight: 100;
    font-size: 18px;
    color: @text-secondary;
}

.main-column {
    height: 100%;

    &.col-center {
        overflow-x: auto;
    }
}

.col-right {
    width: @col-width;
    float: right;
    border-left: @scaled-one-px solid @color-gray-light;
}

.col-left {
    min-width: @col-width;
    max-width: @col-width;
    float: left;
    border-right: @scaled-one-px solid @border-tabbar;

    @media screen and (max-width: 1000px) {
        /*width: 32%;*/
        /*max-width: @col-width;*/
    }
}

.col-center {
    text-align: center;
}

#area-login {
    /*background: green;*/
    padding: 53px 40px 40px 65px;

    #field-login-data {
        #auth-error {
            color: #d43655;
            display: block;
            margin-top: 14px;
        }
    }
}

.text-sub {
    color: @color-gray;
    font-size: 12px;
}

.link {
    color: @text-link;

    &:focus {
        outline: 0 none;
    }

    &[disabled] {
        opacity: @disabled-element-opacity;
        cursor: default;
        pointer-events: none;
    }

    &.link--gray {
        color: @text-secondary;
    }

    &.link--sizem {
        font-size: 14px;
    }
}

#field-pass-restore {
    margin-top: 16px;
}

.copyReserved {
    position: absolute;
    bottom: 61px;
    white-space: nowrap;
}

.before-right {
    margin-right: @col-width;
}

.after-left {
    /*margin-left: @col-width;*/
    flex-grow: 1;
}

.tool-quick-menu {
    border-bottom: @scaled-one-px solid @border-divider;
    padding: 0 0 30px 27px;

    h3 {
        margin: 40px 0 12px;
    }

    > li {
        &.menu-item{
            padding: 5px 20px 5px 0;
            a {
                padding: 0;
                display: flex;
            }
        }

        a {
            line-height: 48px;

            .icon {
                width: 36px;
                height: 48px;
                display: block;
                margin-right: 19px;
            }
        }

        a[action='new:xlsx'] {
            .icon {
                background-position-x:-36px;
            }
        }

        a[action='new:pptx'] {
            .icon {
                background-position-x:-72px;
            }
        }

        &.disabled {
            opacity: 0.6;
            a {
                cursor: default;
            }
        }
    }
}

.img-el, .img-before-el:before {
    background: -webkit-image-set(data-uri('sprite.png') 1x, data-uri('sprite@1.5x.png') 1.5x, data-uri('sprite@2x.png') 2x) no-repeat;
}

.img-el {
    &.theme-inverted {
        filter: @theme-inverted-image-filter;
    }
}

.img-format {
    background: -webkit-image-set(data-uri('formats.png') 1x, data-uri('formats@1.5x.png') 1.5x, data-uri('formats@2x.png') 2x) no-repeat;
}

li.menu-item {
    list-style: none;
    /*padding: 0 27px;*/

    &.extra {
        display: none;
    }

    a {
        display: block;
        text-decoration: none;
        color: @text-normal;
        font-size: 14px;
        padding: 0 27px;
        cursor: pointer;
    }
}

.tool-menu {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: auto;

    /*background-color: #fff;*/
    &:not(.view--modal) {
        z-index: 1;
    }

    > li.menu-item {
        &:not(.separator):not(:last-of-type) {
            border-bottom: @scaled-one-px solid @border-divider;
        }
    }

    > li.menu-item:not(.separator) {
        /*background-color: #fff;*/
        transition: background-color 300ms ease-out;

        &:hover {
            background-color: @highlight-button-hover;
        }

        &.selected {
            background: @highlight-button-pressed;
        }

        a {
            line-height: 55px;
        }
        
        &.bottom {
            /*width: 100%;*/
        }
    }

    > li.menu-item.separator {
        flex-grow: 1;

        @minus-one-px: calc(-1px / var(--pixel-ratio, 1));
        box-shadow: inset 0 @minus-one-px 0 0 @border-divider;
    }
}

.action-panel {
    display: none;
    height: 100%;
    padding: 40px;
    /*min-width: 664px;*/

    > label {
        position: absolute;
        top: 50%;
    }

    &.style--free {
        padding: 0;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }

    &.settings {
        overflow-x: hidden;
    }
}

.connect {
    center {
        padding: 70px 20px;
    }

    #btn-connect {
        margin-top: 50px;
    }

    button {
        &[data-cprov] {
            width: 160px;
            margin: 0 20px 20px 0;
            color: @text-normal;

            img.icon {
                height: 100%;
                width: auto;
            }
        }
    }

    #box-providers-premium-button {
        > button {
            width: 340px;
        }
    }

    .theme-type-dark & {
        .icon__light {
            display: none;
        }
    }

    .theme-type-light & {
        .icon__dark {
            display: none;
        }
    }
}

.text-welcome {
    font-weight: 100;
}

.text-description {
    font-size: 15px;
    font-weight: normal;
}

.flexbox {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.flex-fill {
    flex-grow: 1;
}

.flex-item {
    overflow: hidden;
}

#recovery-sep {
    height: 40px;
    display: none;
}

#box-recovery {
    display: none;

        .flex-fill {
            overflow-y: auto;
            overflow-x: hidden;
        }
}

#box-recent {

    .flexbox {
        .flex-fill {
            overflow-y: auto;
            overflow-x: hidden;
        }
    }
}

#box-portals {
    display: none;

    .table-files {
        /*table-layout: auto;*/
        td:first-child {
            /*width: 50%;*/
        }

        td:empty {
            width: 1px;
        }
    }

    tr:not(.lost) {
        .cportal, .cuser, .cemail {
            /*width: 25%;*/
            padding: 0;
            margin: 0;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .cicon {
            padding: 3px 0 0 0;
            text-align: center;
        }

        .cell-tools {
            width: 45px;
            padding: 0 8px 0 0;
            overflow: visible;
            .hlayout {
                justify-content: flex-end;
            }
        }
    }

    .logout {
        width: 24px;
        height: 24px;
        padding: 0;
        opacity: .8;
        background-color: transparent;

        .icon {
            width: 24px;
            height: 24px;
            background-position: -82px -48px;
        }

        &:hover {
            opacity: 1;
        }
    }

    tr:not(.logged) {
        .cell-tools > div, td > span {
            display: none;
        }
    }

    .icon {
        width: 36px;
        height: 36px;
    }
}

.lst-tools {
    text-align: left;
    margin-top: 30px;
}

.format-from-index(@index) {
    background-position: -24px*@index 0;
}

.table-files {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;

    caption {
        text-align: left;
    }

    td, th {
        text-align: left;
        border: 0 none;
        border-bottom: @scaled-one-px solid @border-divider;
        font-weight: normal;

        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
    }

    .column-title:not(.hidden) th, td {
        height: 48px;
    }

    &.list tr {
        cursor: pointer;
        background-color: @background-normal;
        transition: background-color 300ms ease-out;

        &:hover {
            background-color: @highlight-button-hover;
        }
    }

    tr.unavail {
        opacity: 0.5;
        -webkit-filter: grayscale(100%);

        .minor {
            opacity: 1;
        }
    }

    tr {
        height: 48px;
        &.lost {
            transition: height .2s linear;
            height: 0;
            opacity: 0;
            line-height: 0;

            td {
                height: 0;
                padding: 0;
                border: 0 none;
                > * {
                    display: none;
                }
            }
        }
    }

    .cicon {
        padding: 0 0 0 11px;
        width: 46px;
    }

    .icon {
        float: left;
        width: 24px;
        height: 30px;
        position: relative;

        &.docx {
            .format-from-index(0);
        }

        &.doc {
            .format-from-index(1);
        }

        &.odt {
            .format-from-index(2);
        }

        &.rtf {
            .format-from-index(3);
        }

        &.txt {
            .format-from-index(4);
        }

        &.htm {
            .format-from-index(5);
        }

        &.xlsx {
            .format-from-index(6);
        }

        &.xls {
            .format-from-index(7);
        }
        &.ods {
            .format-from-index(8);
        }
        &.csv {
            .format-from-index(9);
        }

        &.pptx {
            .format-from-index(10);
        }
        &.ppt {
            .format-from-index(11);
        }
        &.odp {
            .format-from-index(12);
        }
        &.pps {
            .format-from-index(13);
        }
        &.pdf {
            .format-from-index(14);
        }
        &.djvu {
            .format-from-index(15);
        }
        &.xps {
            .format-from-index(16);
        }

        &.folder {
            height: 24px;
            background-position: -58px -48px;
        }
    }

    .crypted {
        .icon:before {
            content: ' ';
            position: absolute;
            width: 16px;
            height: 16px;
            top: 17px;
            left: 14px;
            background-position: -58px -74px;
        }
    }

    .cdate {
        width: 110px;
        text-align: right;
        padding: 0 8px 0 0;
    }

    .cname {
        .name, .descr {
            margin: 0;
            text-overflow: ellipsis;
            overflow: hidden;
        }
    }

    .btn-quick {
        margin: 0 5px;
    }

    .primary {
        font-size: 15px;
        color: @text-normal;
    }

    .minor {
        font-size: 11px;
        /*opacity: 0.7;*/
        color: @text-secondary;
    }
}

.table-caption {
    margin: 0 0 12px 0;
    text-align: left;

    &~.table-box {
        border-top: @scaled-one-px solid @border-divider;
    }
}

.table-box {
    /*height: 100%;*/
    /*overflow-y: scroll;*/

    &:not(.empty) .text-emptylist {
        display: none;
    }

}

#wrap,
.tool-menu,
.action-panel,
.content-box,
.table-box {
    &::-webkit-scrollbar-track {
        background-color: @background-normal;

        &:hover {
            background-color: @highlight-scroll-track-hover;
        }
    }

    &::-webkit-scrollbar-thumb {
        background-color: @background-scroll-thumb;

        &:hover {
            background-color: @highlight-scroll-thumb-hover;
        }
    }
}

.text-emptylist::before {
    content: '';
    display: block;
    background-position: 0 -48px;
    width: 58px;
    height: 78px;
    margin: 50px auto 10px;;
}

#tbl-filesrcv {
    .descr {
        display: none;
    }
}

.hlayout {
    display: flex;
    flex-direction:row;
}

#box-recent-folders, #box-portals {
    height: 100%;

    .table-box {
        overflow-y: auto;
        flex-grow: 0;
    }
}

.menu-container {
    position: absolute;
}

.tools-connect {
    .btn {
        margin: 22px 5px;
    }

    .link-connect {
        font-size: 14px;
        color: @text-normal;

        a {
            margin: 0 0 0 10px;
        }
    }
}

.img-welcome {
    width: 720px;
    height: 280px;
}

/*.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
*/
.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 100%;
}

.welcome {
    position: relative;

    .center-box {
        width: 100%;
    }
}

.welcome, #box-empty-portals {
    .img-welcome {
        margin: 48px 0;
    }

    .center-box {
        margin-top: -4vh;
    }
}

#box-empty-portals {
    h3 {
        /*max-width: 680px;*/
    }

    .center-box {
        width: 740px;
    }

    .ads-list {
        margin: 60px auto 46px;
    }

    .carousel {
        margin-bottom: 40px;
    }

    #connect-empty-var-2 {
        max-width:690px;
        max-height:597px;
        height: 100%;
        display:flex;
        flex-direction:column;
        align-self:start;
    }
}

.activate {
    .flexbox {
        align-items: center;
        justify-content: center;
    }

    section {
        margin-top: -15vh;
        width: 90%;
        max-width: 700px;
    }

    input {
        margin: 60px 0 20px;
    }

    .btn.doactivate {
        margin-left: 30px;
    }
}

.box-ver {
    text-align: left;
    font-size: 13px;
    user-select: text;
    color: @text-normal;

    .row-copyright {
        margin-bottom: 0;
    }

    .row-link {
        margin-top: 0;
    }

    .ver-logo {
        width: 245px;
        height: 45px;

        .theme-type-dark & {
            #idx-ver-logo--light {
                display: none;
            }

            #idx-ver-logo--dark {
                display: block;
            }
        }

        #idx-ver-logo--dark {
            display: none;
        }
    }
}

.box-license {
    position: relative;
}

#framelicense {
    border: 0 none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin-top: 20px;
}

.ads-list {
    list-style-type: none;
    overflow: hidden;
    padding: 0;
    width: 680px;
    margin: 0 auto;
}

.logout {
    position: relative;

    &[tooltip]:before {
        right: 120%;
        top: -10px;
    }
}

.settings-field {
    text-align: left;
    margin-bottom: 35px;

    .tbox {
        width: 350px;
    }
}

/*
    carousel
*/
@preslide-shift: 20%;
@preslide-zoom: .9;
.carousel {
    position: relative;

    &__slidebox {
        position: relative;
        height: 300px;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    &__slide {
        position: absolute;
        z-index: 1;
        transition: z-index 0ms .25s;
        padding: 20px 40px;

        &.active {
            z-index: 3;

            opacity: 1;
            transform: translateX(0%) scale(1);
        }

        &.pro-active {
            opacity: .3;
            transform: translateX(@preslide-shift) scale(@preslide-zoom);
        }

        &.pro-active, &.pre-active {
            &:not(.migrate) {
                box-shadow: 0px 3px 40px rgba(0, 0, 0, 0.5);
            }

            &.migrate {
                /*z-index: 2;*/
            }

            &.migrate {
                opacity: 1;
            }
        }

        &.pre-active {
                opacity: .3;
                transform: translateX(-@preslide-shift) scale(@preslide-zoom);
        }

        &.migrate:not(.pro-active):not(.pre-active) {
                transform: translateX(0%) scale(0.9);
        }
    }

    &__slide {
        box-shadow: 0px 3px 40px rgba(0, 0, 0, 0.2);
        /*transition: 300ms 100ms cubic-bezier(0.17, 0.67, 0.55, 1);*/
        transition: 300ms 100ms cubic-bezier(0.15, 0.63, 0.4, 0.93);
        transform: scale(0);
        opacity: 0;
        background-color: @background-normal;

        > svg {
            width: 377px;
            height: 193px;
        }
    }

    &__slide__text {
        margin: 0;
        max-width: 380px;
        color: @color-gray-light;

        &.descr {
            font-size: 13px;
            margin: 10px 0 20px;
        }
    }

    &__scroll__btn {
        border-radius: 50%;
        background-color: @background-primary-button;
        position: absolute;
        width: 30px;
        height: 30px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        z-index: 1;

        &:hover {
            background-color:@highlight-primary-button-hover;
        }

        &:after {
            content:'';
            width: 8px;
            height: 8px;
            border: 2px solid @text-inverse;
            border-right-color: transparent;
            border-bottom-color: transparent;
            display: block;
            margin-top: 9px;
        }

        &.prev {
            left: 0;
            &:after {
                transform: rotate(-45deg);
                margin-left: 12px;
            }
        }

        &.next {
            right: 0;

            &:after {
                transform: rotate(135deg);
                margin-left: 6px;
            }
        }
    }
}

/*
 *
**/

.sett__caption {
    color: @text-normal;
    font-size: 14px;

    &[disabled] {
        opacity: 0.4;
        /*cursor: default;*/
        /*pointer-events: none;*/
    }
}

.hbox {
    display: flex;
    align-items:center;
}

#sett-box-user {
    input {
        margin-right: 20px;
    }
}

#sett-preview-mode {
    width: 18px;
    height: 18px;
    margin-right: 10px;
}

#sett-encrypt-switch {
    margin-right: 20px;
}

#id-features-available {
    display: none;
}

.sett--label-lift-top {
    margin-top: 10px;
}

.sett__note {
    display: inline-block;
    width: 21px;
    height: 21px;
    border-radius: 20px;
    background-color: #2196F3;
    line-height: 20px;
    padding: 1px 8px;
    color: #fff;
    /*vertical-align: middle;*/

    .settings-field:not(.notted) & {
        display: none;
    }
}

.separate-top {
    margin-top: auto;
}

#box-settings {
    height: 100%;

    > .content-box {
        overflow-y: auto;
    }
}
